import ContentCard from "@/components/ContentCard/ContentCard";
import { Form, Input, Tag, Tooltip } from "@arco-design/web-react";
import { IconCaretLeft, IconInfoCircle, IconQuestionCircle } from "@arco-design/web-react/icon";
import React from "react";
import styled from 'styled-components';

const Wrapper = styled.div`
    position: relative;
    width: 200px;
    height: 200px;
`;

const FlexColumn = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: column;
`;

const FlexRow = styled.div`
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    flex-direction: row;
`;

const MiniBtn = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: rgba(54, 54, 54, 0.6);
    cursor: pointer;

    :hover {
        background: rgba(154, 154, 154, 0.3);
    }
`;

interface IProps {
    style?: { [key: string]: string };
}

const Panel = (props: IProps) => {

    const { style = {} } = props;

    return (
        <Wrapper style={{...style}}>
            <FlexColumn>
                <FlexRow>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(45deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(90deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(135deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                </FlexRow>
                <FlexRow>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(0deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                    <MiniBtn>
                        <IconInfoCircle  style={{ fontSize: '24px' }}/>
                    </MiniBtn>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(180deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                </FlexRow>
                <FlexRow>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(-45deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(-90deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                    <MiniBtn>
                        <IconCaretLeft style={{ transform: 'rotate(-135deg)', fontSize: '36px' }}/>
                    </MiniBtn>
                </FlexRow>
            </FlexColumn>
        </Wrapper>
    )
}


export default Panel;